import { useSceneStore } from '@/store/scene';
import { retFilePath } from '@/utils';
import { destroyLayer, regionEffectClickCallback } from '@/service';
import { generateListLayerName } from '@/service/layer';

export const addPathRegionEffect = (selEffect: any, exitFn: any) => {
  const sceneStore = useSceneStore();

  // const roadPreSettingForm = ref({
  //   imageUrl: '',
  //   lineColor: '#4dc9ff',
  //   lineWidth: 5,
  //   duration: 0.02,
  //   height: 10,
  // });

  type AddPathState = 'START' | 'ADD_CONTROL_POINT' | 'NONE';
  const addPathState = ref<AddPathState>('NONE');
  const onAddRoadEffect = ref(false);

  // 区域轮廓添加特效
  function addRegionPath() {
    // roadPreSettingForm.value.imageUrl = retFilePath(
    //   selEffect.value!.effCover || selEffect.value!.quoteUrl
    // );
    // onAddRoadEffect.value = true;
    const { cimInstance } = window;
    // const { imageUrl, lineColor, lineWidth, duration } = roadPreSettingForm.value;
    const layerName = '区域轮廓' + Math.random().toString().split('.')[1];
    const config = {
      name: layerName,
      imageUrl: retFilePath(selEffect.value!.quoteUrl),
      height: 20,
      color: '#63B8FF',
      speed: 0.3,
      vFlow: false,
      uvReversed: false,
    };

    cimInstance.api.drawAreaOutline(config, (e: any) => {
      const layerParam: any = {
        code: Math.random().toString().split('.')[1],
        show: true,
        json: config,
        name: generateListLayerName('regionEffect'),
        layerName: config.name,
        desc: '',
        type: 'regionEffect',
      };
      sceneStore.layerList.unshift(layerParam);
      setTimeout(() => {
        regionEffectClickCallback({
          code: 'effect',
          clickObject: {
            id: config.name,
          },
        });
      }, 0);
      exitFn();
    });
  }

  function stopRegionPath() {
    const { cimInstance } = window;
    cimInstance.api.cancelDraw();
    // onAddRoadEffect.value = false;
    addPathState.value = 'NONE';
  }

  return {
    addRegionPath,
    stopRegionPath,
  };
};
